<template>
  <div id="mine">
    <!-- 上 -->
    <div class="top">
      <!-- 设置和客服 -->
      <div class="gear">
        <img src="../../assets/img/img-mine/设置@3x.png" alt="" />
        <img
          src="../../assets/img/img-mine/客服@3x.png"
          alt=""
          @click="service"
        />
      </div>
      <!-- 头像部分 -->
      <div class="personage">
        <div>无</div>
        <div>
          <span>大佬</span>
          <span class="phone">183****5953</span>
        </div>
      </div>
      <div class="item">
        <div>
          <span>1</span>
          <span @click="saleClick">优惠卷</span>
        </div>
        <div>
          <span>20</span>
          <span>积分</span>
        </div>
        <div>
          <span>1亿</span>
          <span>余额</span>
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="bottom">
      <!-- 我的订单 -->
      <van-nav-bar left-text="我的订单" right-text="查看全部" :border="false" />
      <!-- 个人内容
      <div class="content"> -->
      <!-- 待付款 -->

      <van-grid :column-num="5" :border="false">
        <van-grid-item
          :icon="require('@/assets/img/img-mine/mine1.png')"
          text="待付款"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/mine2.png')"
          text="待发货"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/mine3.png')"
          text="待收货"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/mine4.png')"
          text="待评价"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/mine5.png')"
          text="退款/售后"
        />
      </van-grid>

      <div class="apple">
        <img src="../../assets/img/img-mine/banner@3x.png" alt="" />
      </div>
      <!-- </div> -->
      <!-- 我的订单 -->
      <van-nav-bar left-text="我的服务" right-text="查看全部" :border="false" />
      <!-- 个人内容
      <div class="content"> -->
      <!-- 待付款 -->
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          :icon="require('@/assets/img/img-mine/收货地址@3x.png')"
          text="收获地址"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/收藏@3x.png')"
          text="我的收藏"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/售后 (1)@3x.png')"
          text="西瓜客服"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/发票@3x.png')"
          text="发票中心"
        />
        <van-grid-item
          :icon="require('@/assets/img/img-mine/足迹@3x.png')"
          text="足迹"
        />
      </van-grid>
      <!-- 菠萝 -->
      <div class="ananas">
        <span>甄选热卖</span>
        <div class="details">
          <div class="img1">
            <img src="../../assets/img/img-mine/波罗蜜1.pic@3x.png" alt="" />
            <p>冰激凌网纹瓜一个装(苹果1.2kg起)</p>
            <span>尝鲜期短|脆硬再吃|高迁低卡</span>

            <div class="price">
              <i>￥19.90</i>
              <img
                src="../../assets/img/img-mine/mine6.png"
                alt=""
                class="ico"
              />
            </div>
          </div>

          <div class="img2">
            <img src="../../assets/img/img-mine/菠萝蜜@3x.png" alt="" />
            <p>先剥越南红肉菠萝肉500g</p>
            <span>尝鲜期短|脆硬再吃|高迁低卡</span>

            <div class="price">
              <i>￥39.90</i>
              <img
                src="../../assets/img/img-mine/mine6.png"
                alt=""
                class="ico"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {};
  },
  methods: {
    service() {
      this.$router.push("waiter");
    },
    saleClick() {
      this.$router.push("coupon");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/less/mine.less";
</style>
